<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>健康资料</title>
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">
  <link rel="stylesheet" href="/css/global.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>

</head>
<body>
<div class="bg"></div>
<div id="app">
  <van-row>
    <van-col span="24">
      <van-nav-bar
        title="健康资料"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"></van-nav-bar>
    </van-col>
    <van-col span="24">
      <div class="box m-4 p-3">
        <div class="text-center color-main mb-3">
          <van-icon name="column" size="40"></van-icon>
        </div>
        <div>
          <van-cell-group>
            <!--                        <van-cell title="性别" value="男" ></van-cell>-->
            <!--                        <p th:text="${pHealthData.length}"></p>-->

            <!--<van-cell id="lenght" name="length" title="身高" value="${pHealthData.length}"  th:aaa="${pHealthData.length}" th:text="${pHealthData.length}"  is-link @click="updateCell($event)" v-model="lenght"> {{length}}</van-cell>
           <van-cell id="age" title="年龄" value="${pHealthData.age}" th:aaa="${pHealthData.age}"  th:text="${pHealthData.age}" is-link @click="updateCell($event)" v-model="age"></van-cell>-->
            <!--                        <van-cell id="newWeight"  title="初始体重" value="${pHealthData.newWeight}"  th:aaa="${pHealthData.newWeight}" th:text="${pHealthData.newWeight}" is-link @click="updateCell($event)" v-model="newWeight" ></van-cell>-->
            <!--                        <van-cell id="targetWeight"  title="目标体重" value="${pHealthData.targetWeight}" th:aaa="${pHealthData.targetWeight}"  th:text="${pHealthData.targetWeight}" is-link @click="updateCell($event)" v-model="targetWeight"></van-cell>-->
            <!--                        <van-cell  id="starttime" title="开始时间" value="${starttime!'f'}"  th:aaa="${startdate}" th:text="${startdate}" is-link @click="updateCell($event)" v-model="startdate"></van-cell>-->
            <!--                        <van-cell  id="endtime" title="目标达成时间" value="${endtime!'f'}"  th:aaa="${enddate}" th:text="${enddate}" is-link @click="updateCell($event)" v-model="enddate"></van-cell>&ndash;&gt;-->

            <van-cell v-model="health.height" id="height" th:aaa="${pHealthData.length}" name="height"
                      th:text="${pHealthData.length}" title="身高" is-link @click="updateCell($event)"></van-cell>
            <van-cell id="age" title="年龄" th:aaa="${pHealthData.age}" th:text="${pHealthData.age}" is-link
                      @click="updateCell($event)" v-model="health.age"></van-cell>
            <van-cell id="newWeight" th:aaa="${pHealthData.newWeight}" name="newWeight" title="初始体重"
                      th:text="${pHealthData.newWeight}" is-link @click="updateCell($event)"
                      v-model="health.newWeight"></van-cell>
            <van-cell id="targetWeight" th:aaa="${pHealthData.targetWeight}" name="targetWeight" title="目标体重"
                      th:text="${pHealthData.targetWeight}" is-link @click="updateCell($event)"
                      v-model="health.targetWeight"></van-cell>
            <van-cell id="starttime" th:aaa="${startdate}" name="starttime" title="开始时间" th:text="${startdate}" is-link
                      @click="showCalendar($event)" v-model="health.startTime"></van-cell>
            <van-cell id="endtime" th:aaa="${enddate}" name="endtime" title="目标达成时间" th:text="${enddate}" is-link
                      @click="showCalendar($event)" v-model="health.endTime"></van-cell>
          </van-cell-group>
        </div>
      </div>
    </van-col>
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '30%' ,width:'100%'}"
    >
      <div style="margin: 50px 20px 20px 20px">
                        <textarea id="textare" class="w-100 p-3 border bg-f9 mb-3" style="box-sizing: border-box"
                                  placeholder="请输入相关信息" v-model="cellcontent"></textarea>
        <van-button type="primary" block @click="certain()">确认修改</van-button>
      </div>
    </van-popup>
    <van-popup
      lazy-render="true"
      v-model="show2"
      position="bottom"
      :style="{ height: '40%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @cancel="show2=false"
        @confirm="onConfirmDate"
      ></van-datetime-picker>
    </van-popup>
    <van-col span="24">
      <div class="m-4 d-flex">
        <div class="w-100 pr-2">
          <van-button square color="linear-gradient(to right, #4bb0ff, #6149f6)" block @click="updateHealthData">
            修改健康资料
          </van-button>
        </div>
      </div>
    </van-col>
  </van-row>
</div>
</body>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        value: ' sd',
        health: {
          height: '',
          age: '',
          weight: '',
          targetWeitht: '',
          startTime: '',
          endTime: ''
        },
        show: false,
        show2: false,
        isLoadingShow: true,
        cellid: 'a',
        cellcontent: 'a',
        minDate: new Date(2000, 0, 1),
        maxDate: new Date(2100, 0, 1),
        currentDate: new Date(),
        year: "",
        month: "",
        day: "",
      };
    },
    methods: {
      updateCell(a) {

        this.health.height = 33;
        //后台传来的元素a
        console.log("this height is" + this.health.height);
        console.log("cellid=" + this.cellid + "cellcontent=" + this.cellcontent);
        //得到元素从后台thymeleaf传来的值，存在aaa属性中
        var name = a.currentTarget.getAttribute("aaa");
        console.log("name is " + name);
        this.show = true;
        //把和输入框绑定的content设置为元素的值，把data的id设置为元素的id
        this.cellcontent = name;
        this.cellid = a.currentTarget.id;
        console.log("cellid=" + this.cellid + "this.cellcontent=" + this.cellcontent);
        // document.getElementById("textare").setAttribute("vanname",a.currentTarget.getAttribute("id"));
      },

      certain() {
        this.health.height = "23444";
        var idd = '';
        console.log("newWeight element span is" + document.getElementById("newWeight").children[1].innerHTML);
        switch (this.cellid) {
          case  "height":
            document.getElementById("height").children[1].innerText = this.cellcontent;
            break;
          case  "age":
            document.getElementById("age").children[1].innerHTML = this.cellcontent;
            break;
          case  "newWeight":
            document.getElementById("newWeight").children[1].innerHTML = this.cellcontent;
            break;
          case  "targetWeight":
            document.getElementById("targetWeight").children[1].innerHTML = this.cellcontent;
            break;
        }
        //用户修改完输入框后，通过cellid得到元素在用content改
        console.log("cellid=" + this.cellid + "cellcontent=" + this.cellcontent);
        // this.{{this.cellid}} = this.cellcontent;

        document.getElementById(this.cellid).text = this.cellcontent;

        this.show = false;
      },
      formatter(type, value) {
        if (type === 'year') {
          return `${value}年`;
        } else if (type === 'month') {
          return `${value}月`;
        } else if (type === 'day') {
          return `${value}日`;
        }
        return value;
      },
      onConfirmDate(val) {
        console.log("now is on ConfirmDate");
        this.year = val.getFullYear();
        console.log("this.year  is" + this.year);
        console.log("this month is" + this.month);
        console.log("this day is" + this.day);
        this.month = val.getMonth() + 1;
        this.day = val.getDate();
        console.log(this.year + this.day);
        if (this.month >= 1 && this.month <= 9) {
          this.month = '0' + this.month;
        }
        if (this.day >= 1 && this.day <= 9) {
          this.day = '0' + this.day
        }
        // this.className = 'timeClass';
        document.getElementById(this.cellid).children[1].innerHTML = this.year + "-" + this.month + "-" + this.day;
        this.show2 = false;
      },
      showCalendar(a) {
        console.log("the current time is " + this.currentDate);

        // setTimeout(() => {
        //     this.isLoadingShow = false
        // }, 500);
        var name = a.currentTarget.getAttribute("name");
        this.cellid = name;
        console.log("id is :" + this.cellid);
        if (name == "starttime") {
          this.currentDate = new Date(a.currentTarget.children[1].innerHTML);
          console.log(this.currentDate);
        } else {
          this.currentDate = new Date(a.currentTarget.children[1].innerHTML);
        }
        console.log("this selected date is" + this.currentDate);
        this.show2 = true;
        this.isLoadingShow = true;
      },
      updateHealthData() {
        // var data=new FormData;
        // data.append('length',this.length);
        // axios({
        //     url:"/personUser/updateHealthData",
        //     method:'post',
        //     headers: {
        //         'Content-Type':'application/json'
        //     },
        //     params:{
        //        length: this.length,
        //         newWeight: this.newWeight,
        //         target: this.target,
        //         starttime: this.starttime,
        //         endtime: this.endtime,
        //         targetWeight: this.targetWeight,
        //         age: this.age
        //     }
        // })
        // let data = {
        //     height: document.getElementById("height").children[1].innerHTML,
        //             newWeight: document.getElementById("newWeight").children[1].innerHTML,
        //             target: document.getElementById("target").children[1].innerHTML,
        //             starttime: document.getElementById("starttime").children[1].innerHTML,
        //             endtime: document.getElementById("endtime").children[1].innerHTML,
        //             targetWeight: document.getElementById("targetWeight").children[1].innerHTML,
        //             age: document.getElementById("age").children[1].innerHTML
        // }
        let data = {
          length: document.getElementById("height").children[1].innerHTML,
          newWeight: document.getElementById("newWeight").children[1].innerHTML,
          starttime: document.getElementById("starttime").children[1].innerHTML,
          endtime: document.getElementById("endtime").children[1].innerHTML,
          targetWeight: document.getElementById("targetWeight").children[1].innerHTML,
          age: document.getElementById("age").children[1].innerHTML
        }
        axios.post(`/personUser/updateHealthData`, data)
          .then(res = > {
          console.log('res=>', res);
        alert(res.data.toString());
      })
        ;
        // axios.post('/personUser/updateHealthData', Qs.stringify({

        //     .then(function (response) {
        //         console.log(response);
        //     })
        //     .catch(function (error) {
        //         console.log(error);
        //     });
        // }))
        //     axios.post(
        //     'personUser/updateHealthData',  params: {

        //     }
        // )
        // console.log("this is the health data");
      },
      onClickLeft() {
        window.location.href = "../jumpto/toPersonalCenter";
        Toast('返回');
      },
    },
  });

</script>
</html>
